<!--
 * @Author: your name
 * @Date: 2021-11-26 19:27:09
 * @LastEditTime: 2021-12-01 20:54:26
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \li-yuwei\client\src\view\tag\index.vue
-->
<template>
  <div>
    <NavContent
      v-if="list.length"
      :data="list"
      :handlerClick="toArticleDetail"
    />
    <p v-else class="notData">暂无数据</p>
  </div>
</template>

<script>
import api from "../../api";
import NavContent from "../../components/NavContent.vue";
export default {
  components: {
    NavContent,
  },
  data() {
    return {
      list: [],
    };
  },
  computed: {
    valuePath() {
      const route = this.$route.params.value;
      return route;
    },
  },
  watch: {
    valuePath() {
      this.getClassifyList();
    },
  },
  methods: {
    async getClassifyList() {
      const res = await api.getClassifyList();
      const index = res.data.findIndex((item) => item.value === this.valuePath);
      const result = await api.getClassifyArticle(res.data[index].text);
      this.list = result.data;
    },
    //跳转文章详情
    toArticleDetail(id) {
      this.$router.push({
        path: `/article/${id}`,
      });
    },
  },
  created() {
    this.getClassifyList();
  },
};
</script>
<style scoped lang="scss">
@import "@/assets/scss/common/common.scss";
.notData {
  @include font_color("text-color");
  text-align: center;
  line-height: 45px;
}
</style>
